<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>用户3</title>
    <style>
        .msg {
            color: red;
        }
    </style>
    <script type="text/javascript">
        var ws;

        function WebSocketTest() {
            if ("WebSocket" in window) {
                // alert("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                ws = new WebSocket("ws://127.0.0.1:1992/api/1.0/chat/?token=4f13734306ac8b4c64c496b6f809794ec8e014581552893006");

                ws.onopen = function () {
                    alert("已连接...");
                };
                ws.onmessage = function (massage) {
                    var received_msg = massage.data;
                    try {
                        var recived_msg_data = JSON.parse(received_msg);
                        console.log(recived_msg_data);
                    } catch (e) {
                        console.log(e.toString());
                        var msg_div = document.createElement("div");
                        msg_div.innerHTML = received_msg;
                        msg_div.className = 'msg';
                        document.getElementById("recv").appendChild(msg_div);
                        return
                    }
                    if (recived_msg_data) {
                        var receive_msg = recived_msg_data.data.user_id.name + ':' + recived_msg_data.data.content;
                        msg_div = document.createElement("div");
                        msg_div.innerHTML = receive_msg;
                        msg_div.className = 'msg';
                        document.getElementById("recv").appendChild(msg_div);
                        alert("数据已接收...");
                    }

                };

                ws.onclose = function () {
                    // 关闭 websocket
                    alert("连接已关闭...");
                };
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }

        function send_msg() {
            var msg = document.getElementById("user_input").value;
            var to_token = document.getElementById("to_token").value;
            var to_type = document.getElementById("to_type").value;
            document.getElementById("user_input").value = '';
            var data = {
                content_type: 0,
                from_type: 2,
                to_token: to_token,
                to_type: Number(to_type),
                msg: msg

            };
            console.log(ws);
            ws.send(JSON.stringify(data));
            alert("数据发送中...");
        }
    </script>

</head>
<body>

<div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
<div id="recv">

</div>
<div>
    <li><span>
        输入发送的信息
    </span>
        <input id="user_input"></li>
    <li><span>
        输入接受人的token
    </span><input id="to_token"></li>
    <li><span>
        输入接受人的类型
    </span><input id="to_type"></li>
    <button id="send" onclick="send_msg()">发送</button>
</div>
</body>
</html>